
<template>
    <div class="threeJsPrc52">
      <div class="myCanvas" ref="myCanvas"></div>
    </div>
</template>

<script lang="ts">
import { Vue, Options } from 'vue-property-decorator';
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
const scene = new THREE.Scene();
scene.add(new THREE.AxesHelper(250));
const camera = new THREE.PerspectiveCamera();
camera.fov = 70;
camera.near = 1;
camera.near = 10000;
const renderer = new THREE.WebGLRenderer({
  alpha: true,
});
renderer.debug.checkShaderErrors = false;
renderer.setClearColor(0xb9d3ff, 1);

@Options({ components: {
} })
export default class ThreeJsPrc52 extends Vue {
  public rect: DOMRect|null=null;
  public dpr =750 / window.innerWidth;
  public controls!: OrbitControls;

  public mounted() {
    this.rect = (this.$el as HTMLElement).getBoundingClientRect();
    (this.$refs.myCanvas as HTMLDivElement).append(renderer.domElement);
    renderer.setPixelRatio(this.dpr);
    renderer.setSize(this.rect.width, this.rect.height, false);
    camera.aspect = this.rect.width / this.rect.height;
    camera.position.set(200, 100, 200);
    camera.lookAt(scene.position);
    renderer.render(scene, camera);

    const geometry = new THREE.BoxGeometry(40, 100, 40);
    const material = new THREE.MeshLambertMaterial({
      color: 0x0000ff,
    });
    const mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
    // 模型.castShadow属性用来设置一个模型对象是否在光照下产生投影效果
    mesh.castShadow = true;
    const planeGeometry = new THREE.PlaneGeometry(300, 200);
    const planeMaterial = new THREE.MeshLambertMaterial({
      color: 0x999999,
    });
    const planeMesh = new THREE.Mesh(planeGeometry, planeMaterial);
    scene.add(planeMesh);
    planeMesh.rotateX(-Math.PI / 2);
    planeMesh.position.y = -50;
    // 模型.receiveShadow属性用来设置一个模型对象是否在光照下产生投影效果
    planeMesh.receiveShadow = true;
    const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
    directionalLight.position.set(60, 100, 40);
    scene.add(directionalLight);
    // 光源.castShadow属性true， 光源将投射动态阴影
    directionalLight.castShadow = true;
    directionalLight.shadow.camera.near = 0.5;
    directionalLight.shadow.camera.far = 300;
    directionalLight.shadow.camera.left = -50;
    directionalLight.shadow.camera.right = 50;
    directionalLight.shadow.camera.top = 200;
    directionalLight.shadow.camera.bottom = -100;
    const spotLight = new THREE.SpotLight(0xffffff);
    spotLight.position.set(50, 90, 50);
    spotLight.angle = Math.PI / 6;
    scene.add(spotLight);
    spotLight.castShadow = true;
    spotLight.shadow.camera.near = 1;
    spotLight.shadow.camera.far = 300;
    spotLight.shadow.camera.fov = 20;

    renderer.setAnimationLoop(() => {
      renderer.render(scene, camera);
    });

    this.controls = new OrbitControls(camera, renderer.domElement);
  }
}
</script>

<style lang="postcss" scoped>
.threeJsPrc52{
  touch-action: none;
  width: 100%;
  height: 100%;
  background: grey;
}
</style>
